<template>
  <el-card class="songList">
    <div class="songList-header">
      <div class="h-left">
        <span>{{ cat ? cat : "全部" }}</span>
        <el-dropdown trigger="click" class="drop">
          <span>
            选择分类<el-icon><ArrowDownBold /></el-icon>
          </span>
          <template #dropdown>
            <el-card class="menu">
              <h3 class="classify">
                <a class="classify-a">全部风格</a>
              </h3>
              <dl class="f-cb" v-for="(item, index) in catList" :key="index">
                <dt class="dt">
                  <el-icon><Avatar /></el-icon>{{ item.name }}
                </dt>
                <dd v-for="(tt, ind) in item.list" :key="ind" class="dd">
                  <a @click="newCat(tt.name)">{{ tt.name }}</a>
                </dd>
              </dl>
            </el-card>
          </template>
        </el-dropdown>
      </div>
      <div class="right-a">
        <a>热门</a>
      </div>
    </div>
    <div class="songList-body">
      <div
        class="songList-item"
        v-for="song in songList"
        :key="song.id"
        v-loading="loading"
      >
        <div class="body-img">
          <img
            v-lazy="song.coverImgUrl"
            class="song-img"
            @click="toDetails(song.id)"
          />
          <div class="body-div">
            <span
              ><el-icon><Headset /></el-icon
            ></span>
            <span>{{ Math.trunc(song.playCount / 10000) + "万" }}</span>
            <a
              ><el-icon><VideoPlay /></el-icon
            ></a>
          </div>
        </div>
        <p class="song-name">{{ song.name }}</p>
        <p class="song-by">by {{ song.creator.nickname }}</p>
      </div>
    </div>
    <div class="example-pagination-block">
      <el-pagination
        v-model:currentPage="offset"
        v-model:page-size="limit"
        background
        layout="prev, pager, next"
        :total="total"
        @size-change="getSongList"
        @current-change="getSongList"
      />
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SongBody",
};
</script>

<script lang="ts" setup>
import { getCatListApi, getPlayListApi } from "@/api/discoverMusic/songList";
import {
  Avatar,
  Headset,
  VideoPlay,
  ArrowDownBold,
} from "@element-plus/icons-vue";
import { onMounted, ref, watch } from "vue";
import type {
  CatList,
  SongList,
} from "@/api/discoverMusic/model/songList/songList";
import { useRoute, useRouter } from "vue-router";
// 使用ref定义的数据
// 歌单列表要使用的数据
const limit = ref(35);
const order = ref("hot"); //热门还是分类,但是发现new接口无数据
const cat = ref("全部"); //什么类型的歌单,默认是全部
const offset = ref(1);
const songList = ref<SongList>([]); //歌单数据
const total = ref(); //歌单总数
const loading = ref(false);
// const isShow = false;

// const Route = useRoute();
const router = useRouter();
const route = useRoute();

const catList = ref<CatList>([]); //歌单分类数据

/**
 * 1:封装获取歌单的请求函数
 */
const getSongList = async () => {
  loading.value = true;
  const res = await getPlayListApi({
    limit: limit.value,
    cat: cat.value,
    order: order.value,
    offset: offset.value * limit.value,
  });
  songList.value = res.playlists;
  total.value = res.total;
  loading.value = false;
};
onMounted(getSongList);

/**
 * 2:获取歌单分类数据
 */
onMounted(async () => {
  const res = await getCatListApi();
  const categories = res.categories;
  const subOneList = res.sub.filter((item) => item.category == 0);
  const subTwoList = res.sub.filter((item) => item.category == 1);
  const subThreeList = res.sub.filter((item) => item.category == 2);
  const subFourList = res.sub.filter((item) => item.category == 3);
  const subFiveList = res.sub.filter((item) => item.category == 4);
  const obj = {
    // icon: "Avatar",
    name: categories[0],
    list: subOneList,
  };
  const obj1 = {
    name: categories[1],
    list: subTwoList,
  };
  const obj2 = {
    // icon: "HomeFilled",
    name: res.categories[2],
    list: subThreeList,
  };
  const obj3 = {
    name: res.categories[3],
    list: subFourList,
  };
  const obj4 = {
    name: res.categories[4],
    list: subFiveList,
  };
  catList.value = [obj, obj1, obj2, obj3, obj4];
});

/**
 * 3:点击分类获取新数据 : 问题一:点击分类请求发送了,但路径没有变化
 */
const newCat = async (a: string) => {
  // 得到用户点击的分类名
  // cat.value = a;
  // // 调用函数
  // getSongList();
  // 解决路径不变的问题:同时点击调用函数就可以不用写了
  router.push({
    name: "SongList",
    query: {
      cat: a,
    },
  });
};

/**
 * 4:点击去详情页
 */
const toDetails = (id: number) => {
  router.push({
    name: "DetailsSong",
    query: {
      id,
    },
  });
  // console.log(id);
};

/**
 * 5:监视路径的变化(从歌单详情页点击过来,发送请求,更改标题)
 * 1:监视路由变化要开启深度监视,否则函数不会触发
 */
watch(
  route,
  () => {
    console.log(111);
    cat.value = route.query.cat as string;
    getSongList();
  },
  {
    immediate: true,
  }
);
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.songList {
  position: relative;
  width: 980px;
  height: 1800px;
  padding: 40px;
}
.songList-header {
  height: 70px;
  line-height: 70px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 2px solid red;
}
.h-left {
  flex: 1;
  margin: auto;
}
.h-left > span {
  display: inline-block;
  font-size: 35px;
  font-weight: normal;
  width: 80px;
  height: 50px;
}
.drop {
  width: 110px;
  height: 45px;
  line-height: 45px;
  font-size: 18px;
  border: 2px solid #c4c4c4;
  border-radius: 10px;
  padding-left: 10px;
  margin-top: 10px;
  margin-left: 10px;
}
.right-a {
  width: 60px;
  height: 40px;
  line-height: 40px;
  background-color: red;
  font-weight: normal;
  color: azure;
  text-align: center;
  border-radius: 5px;
  margin-top: 15px;
}
.menu {
  display: flex;
  width: 720px;
  height: 550px;
}
.classify {
  position: relative;
  display: inline-block;
  width: 680px;
  height: 38px;
  line-height: 38px;
  border-bottom: 1px solid #c4c4c4;
  font-weight: normal;
}
.classify-a {
  position: absolute;
  width: 75px;
  height: 26px;
  line-height: 26px;
  left: 0;
  top: 0;
  font-size: 12px;
  text-align: center;
  border: 2px solid #c4c4c4;
  background-color: #f6f6f6;
}
.f-cb {
  display: flex;
  flex-direction: row;
  font-size: 15px;
  height: 42px;
  line-height: 42px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.dt {
  width: 70px;
  height: 40px;
  display: block;
  line-height: 50px;
}
.dd {
  margin: 5px;
}
.songList-body {
  display: flex;
  /* float: left; */
  justify-content: space-between;
  flex-wrap: wrap;
}
.songList-item {
  position: relative;
  /* width: 140px; */
  width: 20%;
  height: 188px;
  padding: 0 60px 30px 25px;
  margin-bottom: 30px;
  text-align: center;
}
.body-img {
  width: 140px;
  height: 140px;
  /* border: 1px solid red; */
  margin-top: 40px;
  border-radius: 5px;
  /* border-radius: 20px; */
}

.song-img {
  width: 110%;
  height: 100%;
}
.body-div {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 70%;
  height: 27px;
  left: 0;
  bottom: 9px;
  color: #ccc;
  background-color: #27211b;
  margin-left: 25px;
  opacity: 0.8;
}
.song-name {
  width: 160px;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-top: 5px;
  font-size: 18px;
  font-weight: 600;
}
.song-by {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.example-pagination-block {
  position: absolute;
  width: 500px;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 50px;
}
</style>
